<template>
  <div class="org-manage-container">
    <navigation ref="navigation" :data-request="getList"></navigation>
    <div class="search">
      <el-form label-width="100px" class="demo-ruleForm" :inline="true">
        <el-form-item label="自定义参数" prop="name">
          <el-input
            v-model="paramInput"
            placeholder="请输入参数如：a=1;b=2;"
            style="width:370px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="操作时间" prop="datetime">
          <el-date-picker
            v-model="datatime"
            type="datetimerange"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            style="width:250px"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-popover v-model="visible" placement="bottom" width="390" trigger="click">
            <div style="max-height:300px; overflow-y:scroll;">
              <el-table stripe border width="390" :data="filterData">
                <el-table-column width="150" label="key" prop="key">
                  <template scope="scope">
                    <el-select v-model="scope.row.key" clearable placeholder="请选择key">
                      <el-option
                        v-for="(item, index) in selectData"
                        :key="index"
                        :label="item.label"
                        :value="item.label"
                      ></el-option>
                    </el-select>
                    <!-- <el-input v-model="scope.row.key" placeholder="请选择key"></el-input> -->
                  </template>
                </el-table-column>
                <el-table-column width="150" label="value" prop="value">
                  <template scope="scope">
                    <el-input
                      v-model="scope.row.value"
                      placeholder="请输入value"
                      :disabled="!scope.row.key"
                      clearable
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="81" align="center">
                  <el-button
                    type="text"
                    icon="el-icon-remove-outline"
                    @click="del(index)"
                    v-if="filterData.length>1"
                  ></el-button>
                  <el-button
                    type="text"
                    icon="el-icon-circle-plus-outline"
                    @click="plus"
                    v-if="filterData.length<5"
                  ></el-button>
                </el-table-column>
              </el-table>
            </div>
            <div style="text-align: right; margin: 10px 0px 0px">
              <el-button size="mini" type="text" @click="cancel">取消</el-button>
              <el-button type="primary" size="mini" @click="confirm">确定</el-button>
            </div>
            <el-button slot="reference" type="text">
              更多筛选
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
          </el-popover>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="org-manage-context">
      <div class="org-manage-table">
        <el-table :data="tableData" stripe border>
          <el-table-column type="index" width="60" label="序号"></el-table-column>
          <!-- <el-table-column prop="id" label="主键ID" width="240"></el-table-column> -->
          <el-table-column prop="url" label="接口地址(url)" width="150"></el-table-column>
          <el-table-column prop="method" label="method" width="90"></el-table-column>
          <el-table-column prop="request" label="请求(request)" width="250">
            <template #default="scope">
              <div>
                <el-popover v-if="scope.row.request" placement="left-start" trigger="click">
                  <div class="popover-box">
                    <pre>{{ fmtBody(scope.row.request) }}</pre>
                    <button
                      class="el-icon-document-copy copy"
                      :data-clipboard-text="scope.row.request"
                      @click="copy"
                    >复制</button>
                  </div>
                  <template #reference>
                    <!-- <i class="el-icon-view" style="cursor:pointer"></i> -->
                    <div
                      style="cursor: pointer; height:90px; overflow-y: scroll;"
                      id="copy"
                    >{{scope.row.request}}</div>
                    <!-- <el-icon style="cursor: pointer;"><warning /></el-icon> -->
                    <!-- {{Base64.decode(scope.row.request)}} -->
                  </template>
                </el-popover>
                <span v-else>无</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="response" label="响应(response)" width="350">
            <!-- <template scope="scope"> {{ Base64.decode(scope.row.request) }}</template> -->
            <template #default="scope">
              <div>
                <el-popover v-if="scope.row.response" placement="left-start" trigger="click">
                  <div class="popover-box">
                    <pre>{{ fmtBody(scope.row.response) }}</pre>
                    <button
                      class="el-icon-document-copy copy"
                      :data-clipboard-text="scope.row.response"
                      @click="copy"
                    >复制</button>
                  </div>
                  <template #reference>
                    <i class="el-icon-view" style="cursor:pointer"></i>
                    <!-- <div
                      style="cursor: pointer; height:90px; overflow-y: scroll;"
                    >{{scope.row.response}}</div>-->
                    <!-- <el-icon style="cursor: pointer;"><warning /></el-icon> -->
                    <!-- {{Base64.decode(scope.row.request)}} -->
                  </template>
                </el-popover>
                <span v-else>无</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="claims" label="用户信息(claims)" width="250">
            <template #default="scope">
              <div>
                <el-popover v-if="scope.row.claims" placement="left-start" trigger="click">
                  <div class="popover-box">
                    <pre>{{ fmtBody(scope.row.claims) }}</pre>
                    <button
                      class="el-icon-document-copy copy"
                      :data-clipboard-text="scope.row.claims"
                      @click="copy"
                    >复制</button>
                  </div>
                  <template #reference>
                    <div
                      style="cursor: pointer; height:90px; overflow-y: scroll;"
                    >{{scope.row.claims}}</div>
                    <!-- <i class="el-icon-view" style="cursor:pointer"></i> -->
                    <!-- {{Base64.decode(scope.row.request)}} -->
                  </template>
                </el-popover>
                <span v-else>无</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="userName" width="120"></el-table-column>
          <el-table-column prop="createdAt" label="请求时间(createdAt)" width="170"></el-table-column>
          <el-table-column prop="token" label="token" width="350">
            <template #default="scope">
              <div style="cursor: pointer; height:90px; overflow-y: scroll;">{{scope.row.token}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="version" label="版本号(version)" width="150"></el-table-column>
          <el-table-column prop="ip" label="请求ip" width="150"></el-table-column>
          <el-table-column prop="userID" label="userID" width="80"></el-table-column>
          <el-table-column prop="level" label="level" width="90" fixed="right">
            <template #default="scope">
              <el-tag
                style="margin:0 10px 3px 0px"
                :type="converArea(scope.row.level)"
              >{{ scope.row.level | dictFilter("logger_level") }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="timing" label="timing" width="70" fixed="right">
            <template #default="scope">{{ parseFloat(scope.row.timing/100).toFixed(2) }} s</template>
          </el-table-column>
        </el-table>
        <div style="text-align:right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="query.page"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="query.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- <modal ref="modal" @commit="handleCommit"></modal> -->
  </div>
</template>
<script>
import Vue from "vue";
import navigation from "@/components/navigation";
import Base64 from "base-64";
import { getOperateLog } from "@/api/common";
// import Clipboard from "clipboard";
// Vue.use(Clipboard);
export default {
  components: {
    navigation
    // Clipboard
  },
  watch: {
    // filterText(val) {
    //   this.$refs.tree.filter(val);
    // },
  },
  data() {
    return {
      Base64,
      tableData: [],
      filterData: [{ key: "", value: "" }], // 自定义参数下拉选择
      selectData: [], // 自定义下拉select
      visible: false,
      datatime: "",
      paramInput: "", // 自定义参数输入框
      currentVal: "",
      dictLevel: [],
      formProps: {
        label: "操作日志",
        hasSearch: false
      },
      query: {
        fields: [],
        page: 1,
        pageSize: 10,
        total: 0,
        queryLanguage: [],
        time: {
          end: null,
          start: null
        }
      }
    };
  },
  mounted() {
    this.$refs.navigation.init(this.formProps);
    // new Clipboard(".copy");
    this.getList();
  },
  async created() {
    const data = await this.getDict([
      "must_logger_field",
      "gte_logger_field",
      "lte_logger_field",
      "like_logger_field",
      "in_logger_field",
      "notin_logger_field",
      "logger_level"
    ]);
    if (data) {
      Object.keys(data).forEach(item => {
        if (item == "logger_level") {
          this.dictLevel = data[item];
        } else {
          this.selectData = [...this.selectData, ...data[item]];
        }
      });
      //   console.log("this.selectData", this.selectData);
    }
  },
  methods: {
    // 新增搜索参数
    plus() {
      this.filterData.push({ key: "", value: "" });
    },
    //
    del(index) {
      this.filterData.splice(index, 1);
    },
    reset() {
      this.filterData = [{ key: "", value: "" }];
      this.datatime = "";
      this.paramInput = "";
      this.query = {
        fields: [],
        page: 1,
        pageSize: 10,
        total: 0,
        queryLanguage: [],
        time: {
          end: null,
          start: null
        }
      };
      this.getList();
    },
    confirm() {
      this.visible = false;
      this.query.fields = [];
      // this.filterData = this.filterData.filter(item => item.key && item.value); // 过滤掉 key 或者 value为空的
      this.filterData.forEach(item => {
        item.key &&
          item.value &&
          this.query.fields.push({
            label: item.key,
            content: String(item.value)
          });
      });
    },
    // copy(e) {
    //   // const clipboard = new Clipboard(".copy");
    //   clipboard.on("success", e => {
    //     this.$message({ type: "success", message: "复制成功" }); // 释放内存
    //     clipboard.off("error");
    //     clipboard.off("success");
    //     clipboard.destroy();
    //   });
    //   clipboard.on("error", e => {
    //     // 不支持复制
    //     this.$message({ type: "waning", message: "该浏览器不支持自动复制" }); // 释放内存
    //     clipboard.off("error");
    //     clipboard.off("success");
    //     clipboard.destroy();
    //   });
    //   clipboard.onClick(e);
    // },
    cancel() {
      this.filterData = [{ key: "", value: "" }];
      this.visible = false;
    },
    getList() {
      let params = {
        ...this.query,
        queryLanguage: this.paramInput.split(";"),
        time: {
          start: this.datatime?.[0] || null,
          end: this.datatime?.[1] || null
        }
      };
      delete params.total;
      //   console.log("params", params);
      getOperateLog(params).then(res => {
        if (res && res.code == 0) {
          this.tableData = res.data.list;
          this.query.total = res.data.total;
        }
      });
    },
    clickCt(val) {
      this.currentVal = val;
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getList();
    },
    fmtBody(value) {
      try {
        return JSON.parse(value);
      } catch (err) {
        return value;
      }
    },
    converArea(val) {
      switch (val) {
        case 2:
          return "danger";
        case 1:
          return "warning";
        case 0:
          return "success";
      }
    }
  }
};
</script>
<style lang="scss" scope>
.search {
  margin-top: 20px;
}
.popover-box {
  background: #112435;
  color: #f08047;
  max-height: 500px;
  min-height: 150px;
  width: 420px;
  overflow: auto;
  overflow-y: scroll;
}
.popover-box::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.copy {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}
</style>
